<template>
	<view class="container">
		<view class="view_top" :style="{paddingTop: statusBarHeight + 'px'}">
			<image class="close-button" @click="closePage" src="/static/images/ic_login_nav_close.png"></image>
			<image class="logo" src="/static/images/ic_login_nav_logo.png" mode="widthFix"></image>
			<image class="title" src="/static/images/ic_login_nav_title.png" v-show="isShow"></image>
		</view>

		<view class="login-options">
<!--			<button class="quick_login-full-width-button" v-show="isShow" open-type="getPhoneNumber"-->
<!--				@getphonenumber="getPhoneNumber">一键登录</button>-->
			<view class="letter_login-full-width-button" @click="letterLogin" v-show="isShow">短信登录</view>
			<view class="login-full-width-button" @click="passwordLogin">密码登录</view>
			<view class="regist-full-width-button" @click="register" v-show="isShow">没有账号,去注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rightSafeArea: 0,
				statusBarHeight: 20,
				isShow: uni.getStorageSync("isShow"),
				uuid: '',
			}
		},
		created() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			//获取状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight

			// 微信小程序适配
			// #ifdef MP-WEIXIN
			const menuRect = uni.getMenuButtonBoundingClientRect()
			this.rightSafeArea = systemInfo.windowWidth - menuRect.left // 计算右侧避让距离
			// #endif
		},
		methods: {
			closePage() {
				uni.navigateBack();
			},
			passwordLogin() {
				// 处理密码登录逻辑
				uni.navigateTo({
					url: `/pages/login/login?isNav=true`
				})
			},
			letterLogin() {
				uni.navigateTo({
					url: `/pages/login-letter/login-letter?isNav=true`
				})
			},
			register() {
				// 处理注册逻辑
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			async getPhoneNumber(e) {
				const openId = this.getIsActivationRegist()
				const bdId = this.getBdIsActivationRegist()
				const res = await this.$http({
					method: 'GET',
					url: '/user/wxMini/v2/mobile/login',
					data: {
						code: e.detail.code,
						openId: openId,
						bdVid: bdId
					},
				})

				if (res) {
					uni.setStorageSync('isActivationRegist', true);
					this.$app.setLoginStorage(res.token);
					this.loadUserData();
				}
			},
			// 是否上报微信
			getIsActivationRegist() {
				const isActiva = this.$app.isActivationRegist();
				return isActiva ? '' : uni.getStorageSync('activationData')
			},
			// 是否上报百度
			getBdIsActivationRegist() {
				const isActiva = this.$app.isActivationRegist();
				return isActiva ? '' : uni.getStorageSync('bdActivationData')
			},
			async loadUserData() {
				const res = await this.$http({
					method: 'GET',
					url: '/user/base/info',
				});

				if (res) {
					this.$app.setUserInfo(res.data);
					// 关闭页面逻辑
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
	}

	.view_top {
		display: flex;
		flex-direction: column;
	}

	.close-button {
		width: 68rpx;
		height: 68rpx;
		margin-left: 30rpx;
	}

	.logo {
		align-self: center;
		width: 168rpx;
		margin-top: 180rpx;
	}

	.title {
		margin-top: 88rpx;
		align-self: center;
		width: 392rpx;
		height: 162rpx;
	}

	.login-options {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: 100rpx;
		padding: 0 30rpx;
	}
	
	.quick_login-full-width-button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 32rpx;
		height: 88rpx;
		width: 100%;
		background-color: #4D7EF4;
		border-radius: 8rpx;
		font-size: 28rpx;
		border: 2rpx solid #4D7EF4;
		background-color: white;
		color: #4D7EF4;
	}

	.login-full-width-button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 32rpx;
		height: 88rpx;
		width: 100%;
		background-color: #4D7EF4;
		color: white;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.letter_login-full-width-button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 32rpx;
		height: 88rpx;
		width: 100%;
		background-color: #61C058;
		color: white;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.regist-full-width-button {
		text-align: center;
		width: 100%;
		color: #4D7EF4;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
</style>